import Icon from '@/components/Icon'
import dp from 'dompurify'
import hj from 'highlight.js'
import _ from 'lodash'
import { useEffect } from 'react'
import './index.scss'
function Test() {
  // 测试 _.differenceBy 方法
  // _.differenceBy(所有数据，要排除的数据，排除对象中唯一表示【一般是id】)
  // 原生方式：
  const all = [1, 3, 5, 7]
  const my = [1, 7]
  const list = _.differenceBy(all, my)
  const obj1 = [
    { id: 1, name: 'za' },
    { id: 2, name: 'zsa' },
    { id: 3, name: '897' },
  ]
  const obj2 = [{ id: 1, name: 'za' }]
  //
  const obj = _.differenceBy(obj1, obj2, 'id')

  console.log(list)
  console.log(obj)
  // ===========xss恶意脚本原理============
  const html1 = '<div><script>alert(出现问题)</script></div>'
  const html2 = '<div onClick={alert(666)}>xss攻击</div>'
  // 对插入页面的html元素进行消杀处理,会返回安全的html
  const safeHtml = dp.sanitize(html2)
  // ========代码块高亮
  // 1. 导包遍历，2. 引入样式
  useEffect(() => {
    hj.configure({
      // 忽略html特殊字符的警告
      ignoreUnescapedHTML: true,
    })
    // 获取网页中所有代码元素，遍历代码块对其高亮处理
    document.querySelectorAll<HTMLElement>('pre code').forEach((el) => {
      hj.highlightElement(el)
    })
  }, [])
  return (
    <div>
      <h1>test</h1>
      {/* 1. 测试原生css变量 */}
      <div className="cssVar"> 局部css变量 </div>
      <div className="cssOto"> 另一个作用域 </div>
      <hr />
      {/* 2. 1px像素边框bug */}
      <div className="one">
        <div className="top"></div>
        <div className="btm"></div>
      </div>
      {/* 3. 测试 icon 图标是否正常 */}
      <div>
        <svg className="icon" aria-hidden="true">
          {/* 使用时，只需要将此处的 iconbtn_like_sel 替换为 icon 的名称即可*/}
          <use xlinkHref="#iconbtn_like_sel"></use>
        </svg>
        <svg className="icon" aria-hidden="true">
          {/* 使用时，只需要将此处的 iconbtn_like_sel 替换为 icon 的名称即可*/}
          <use xlinkHref="#iconbtn_mine_sel"></use>
        </svg>
      </div>
      {/* 使用 封装的图标组件 */}
      <p>
        <Icon
          icon={'iconbtn_like_sel'}
          onClick={() => {
            // console.log(1233)
          }}
          className="icon1"
        />
        <Icon icon="iconbtn_tag_close" />
        <Icon icon={'iconbtn_mine_sel'} />
      </p>
      {/* 4. 测试xss代码消杀 */}
      <div style={{ width: 100, height: 100, backgroundColor: '#0FC' }}>
        <h1>测试恶意脚本</h1>
        <div dangerouslySetInnerHTML={{ __html: safeHtml }}></div>
      </div>
      {/* 5. 测试代码块高亮 */}
      <div>
        <pre>
          <code>import React from 'react'</code>
          <code>console.log(React)</code>
        </pre>
      </div>
    </div>
  )
}

export default Test
